/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '~remixicon/fonts/remixicon.css';
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import './app/@core/font-face';

@import './styles/themes/base';
@import './styles/themes/default';
@import './styles/themes/dark';
@import './styles/themes/dark-green';
@import './styles/themes/thin';
@import './styles/utilities';
@import './styles/components/index';
@import './app/_app.component';

@import 'libs/formly/_formly';
@import 'libs/story-angular/src/lib/_index';
@import 'libs/apps/indicator-market/index';

html,
body {
  height: 100%;
  overflow: hidden;
  font-size: 14px;
}

$text-font: Lato, 'Noto Serif SC', monospace;

body {
  --mdc-dialog-subhead-font: $text-font;
  --mdc-dialog-supporting-text-font: $text-font;
  --mat-table-row-item-label-text-font: $text-font;
  --mat-table-header-headline-font: $text-font;

  color: var(--ngm-text-primary-color);
  display: flex;
  margin: 0;

  &.mobile {
    .cdk-overlay-pane {
      max-width: 100vw !important;
    }
  }
}

// 不能阻止所有的滚动, 因为有的需要滚动
// .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
//   max-width: 100%;
// }
.ngm-smart-echarts__tooltip {
  z-index: 100 !important;
}

.cdk-overlay-container .mat-mdc-dialog-container {
  --mdc-dialog-container-shape: 15px;
  --mdc-dialog-container-elevation: rgba(0, 0, 0, 0.4) 0px 30px 90px;
  max-height: 90vh;

  .mdc-dialog__surface {
    display: flex;
  }
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

formly-field,
formly-form {
  display: block;
}

.mat-mdc-dialog-container {
  .cdk-drag.cdk-drag-handle {
    cursor: pointer;
  }

  .ngm-theme-dark {
    .mdc-text-field--filled:not(.mdc-text-field--disabled) {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}

.mat-toolbar.mat-toolbar-single-row.ngm-density__cosy {
  height: unset;
  font-size: 1rem;
  line-height: 1rem;
  padding: 10px 16px;
}

formly-wrapper-mat-form-field {
  .mat-form-field-type-checkbox {
    .mat-form-field-infix {
      width: 20px;
    }
  }
  .mat-form-field-infix {
    width: 80px;
  }
}

// 会造成很多地方的样式问题如 table 内的 button
*:not(.mat-cell) > .mat-icon-button.mat-button-base {
  .mat-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

html.cdk-global-scrollblock {
  overflow-y: auto;
}

.mat-mdc-button-base.mat-mdc-icon-button {
  @apply flex justify-center items-center;
}

.metad-formly-tab-group {
  display: flex;
  .mat-mdc-tab-group {
    flex: 1;
  }
}

.ngm-settings-panel__drawer-content {
  .mat-mdc-tab-header {
    --mdc-secondary-navigation-tab-container-height: 38px;
  }
}

.metad-formly__panel-wrapper.metad-formly__nested-area.metad-formly__panel-padding {
  @apply px-4 pb-2;
}

.ngm-dialog-container {
  @apply flex-1 flex flex-col;
  .mat-horizontal-content-container {
    padding: 0 24px;
  }
}

.mat-mdc-tab-nav-panel {
  @apply flex-1 flex flex-col;
}

.cdk-overlay-pane.mat-mdc-tooltip-panel {
  .mdc-tooltip {
    @apply text-xs;
  }
}
